<template>
  <a-form-model
    id="components-form-demo-normal-login"
    ref="formInline"
    :model="formInline"
    :rules="rules"
    class="login-form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    style="margin-top: 0px;"
    @submit="handleSubmit"
  >
    <a-form-model-item has-feedback :wrapper-col="{ span: 24, offset: 0 }" prop="mobile">
      <a-input
        v-model="formInline.mobile"
        :max-length="64"
        placeholder="手机号"
      >
      <a-icon slot="prefix" type="mobile" theme="twoTone"/>
      </a-input>
    </a-form-model-item>

    <a-form-model-item has-feedback :wrapper-col="{ span: 24, offset: 0 }" prop="verify">
      <a-input-password
        v-model="formInline.verify"
        :max-length="32"
        placeholder="密 码"
      >
      <a-icon slot="prefix" type="mail" theme="twoTone" />
      </a-input-password>
    </a-form-model-item>

    <a-form-model-item prop="code" :wrapper-col="{ span: 24, offset: 0 }">
      <a-input
        v-model="formInline.code"
        placeholder="验证码"
        :max-length="4"
        @change="codeChange"
      >
      <a-icon slot='prefix' type="file-image" theme="twoTone" />
        <a-tooltip slot="suffix" title="点击切换验证码">
          <img
            :src="base64"
            style="height: 40px; cursor: pointer;"
            @click="captchaGet"
          />
        </a-tooltip>
      </a-input>
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{span: 24, offset: 0 }">
      <a-button
        type="primary"
        html-type="submit"
        block
      >
        登 录
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import token from "@/api/token"
import captcha from "@/api/captcha"

export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      formInline: {
        mobile: "",
        verify: "",
        code: "",
      },
      rules: {
        mobile: [
          {
            validator: (rule, value, callback) => {
              if(value == ""){
                return callback(new Error("手机号必须填写。"))
              }
            
              if(!this.$func.phoneCheck(value))
                return callback(new Error("请填写正确的手机号码！！"));
              
              return callback();
            },
            trigger: "blur",
          },
        ],
        verify: [
          {
            validator: (rule, value, callback) => {
              if(value == "")
                return callback(new Error("必须填写密码！！"));
    
              return callback();
            },
            trigger: "blur",
          },
        ],
      },

      mobileFlag: false,
      verifyFlag: false,
      submitBtnLock: true,
      base64: "",
      base64Id: null,
    }
  },
  mounted() {
    this.captchaGet()
  },
  methods: {
    captchaGet() {
      this.base64 = ""
      this.base64Id = ""
      this.formInline.code = ""

      captcha.get().then((response) => {
        if (response.code !== 1) {
          this.$message.error(response.message)
          return
        }
        this.base64 = response.data.base64
        this.base64Id = response.data.id
      })
    },
    async codeChange() {
      if (!this.formInline.code || this.formInline.code.length < 4) return false
      return await captcha
        .verify({
          id: this.base64Id,
          value: this.formInline.code,
        })
        .then((response) => {
          if (response.code !== 1) {
            this.captchaGet()
            this.$message.error(response.message)
            return false
          }
          return true
        })
        .catch(() => {
          return false
        })
    },
    handleSubmit(e) {
      let validFlag = true
      e.preventDefault()
      this.$refs.formInline.validate((valid) => {
        console.log(valid);
        validFlag = valid
      })
      if (!validFlag) return

      token
        .week({
          mobile: this.formInline.mobile,
          verify: this.formInline.verify,
          base64_id: this.base64Id,
          base64_value: this.formInline.code,
        })
        .then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.message)
            this.captchaGet()
            return
          }
          this.$message.success("登录成功.")
          this.$token.set(
            response.data.access_token,
            response.data.refresh_token
          )

          setTimeout(() => {
            this.$emit("ok")
          }, 800)
        })
        .catch(() => {
          this.captchaGet()
        })
    },
  },
}
</script>

<style>
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
